<template>
    <div id="nava">
        <el-menu
          :default-active="$route.path"
          class="el-menu-demo"
          router
          activeClass="active" exact
          active-text-color="#f60">
          <div  v-for="(item,i) in menu_list" :key="'aa'+i" > 
            <el-menu-item :index="item.path"  v-if="item.title"><i :class="item.icon"></i><span>{{item.title}}</span></el-menu-item>
          </div>
        </el-menu>
    </div>
</template>

<script>
    import {modee} from '../router'

  export default {
    data() {
      return {
        menu_list:modee
      };
    },
    methods: {
      
    }
  }
</script>
<style scoped>
    #nava .el-menu-demo{
        position:fixed;
        z-index: 999999;
        bottom: 0;
        width: 100vw;
        display: flex;
        justify-content: space-around;
        /* align-items: center; */
        background:#fff;
        font-size: 26px;
        text-align: center;
        color:#33c;
    }
    .el-menu-demo .el-menu-item{
        background:#fff;
    }
    .el-menu-item{
        line-height: 20px;
        align-items: center;
    }
    .el-menu-item i{
        display: block;
        line-height: 20px;
        width: 100%;
        margin-right:0;
        text-align: center;
        padding-top:6px;
    }
</style>